﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input v-model="listQuery.name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('terminal.name')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.attribute"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('terminal.attribute')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.category_name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('sort.name')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <div class="search-button"
               @click="handleFilter">
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div class="search-button"
               @click="handleRefresh">
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
          <div class="search-button"
               @click="searchItem">
            <img v-show="showSearchItem === true"
                 src="@/assets/images/bg_more@2x.png" />
            <img v-show="showSearchItem === false"
                 src="@/assets/images/bg_sx@2x.png" />
          </div>
        </el-form>
        <div class="filter-right">
          <div class="add-button">
            <el-button type="primary">导出excel</el-button>
          </div>
        </div>
      </div>
      <div v-show="showSearchItem"
           class="filter-container">
        <el-form>
          <el-form-item>
            <el-input v-model="listQuery.code"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('terminal.code')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.itoc_name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('operations.searchName')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.merchant_circle_name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('businessDistrict.name')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.linkman"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('public.linkman')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.linkman_mobile"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('public.mobile')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.region_name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('public.region')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.status"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in statusOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table :key="tableKey"
                  v-loading="listLoading"
                  :data="list"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255,255,255,0.2)"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%min-height:1000px">
          <el-table-column fixed="left"
                           align="center"
                           :label="$t('table.id')"
                           width="65">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('warehouse.name')">
            <template slot-scope="scope">
              <span>{{ scope.row.depot_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.code_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_code }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.name_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('brand.name')">
            <template slot-scope="scope">
              <span>{{ scope.row.brand_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.category')">
            <template slot-scope="scope">
              <span>{{ scope.row.category_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.attribute')">
            <template slot-scope="scope">
              <span>{{ scope.row.attribute }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('units.name')">
            <template slot-scope="scope">
              <span>{{ scope.row.units_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('stock.number')">
            <template slot-scope="scope">
              <span>{{ scope.row.stock }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('expense.price')">
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('expense.price')">
            <template slot-scope="scope">
              <span>{{ scope.row.price*scope.row.stock }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('stock.warning')">
            <template slot-scope="scope">
              <span>{{ scope.row.min_stock_alarm }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background
                       :current-page="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog :title="textMap[dialogStatus]"
                 :visible.sync="dialogChartFormVisible">
        <div class="popup-form">
          <div class="headerless-form">
            <div class="from-title">提货单编号:&nbsp; {{ temp.order_no }}</div>
            <div class="from-content">
              <div>
                订单状态:&nbsp; {{ pickUpEs(temp.status) }}
              </div>
              <div>
                申请日期：&nbsp; {{ temp.create_time }}
              </div>
              <div>
                提货日期:&nbsp; {{ temp.take_time }}
              </div>
            </div>
          </div>
          <div class="from-banner"></div>
          <div class="header-form">
            <div class="from-title">提货方信息</div>
            <div class="from-item">
              <div class="from-header">
                <div>所属运营中心</div>
                <div>申请人</div>
                <div>提货人</div>
              </div>
              <div class="from-content">
                <div>{{ temp.itoc_name }}</div>
                <div>{{ temp.linkman }}</div>
                <div>{{ temp.linkman_mobile }}</div>
              </div>
            </div>
          </div>
          <div class="header-form">
            <div class="from-title">供货人信息</div>
            <div class="from-item">
              <div class="from-header">
                <div>所属运营中心</div>
                <div>仓库名</div>
                <div>仓库地址</div>
                <div>出库经办人</div>
              </div>
              <div class="from-content">
                <div>{{ temp.itoc_name }}</div>
                <div>{{ temp.take_depot_name }}</div>
                <div>{{ temp.take_depot_address }}</div>
                <div>{{ temp.take_principal_nickname }}</div>
              </div>
            </div>
          </div>
          <div class="from-banner"></div>
          <div class="header-form">
            <div class="from-item">
              <div class="from-header">
                <div>商品名称</div>
                <div>商品编码</div>
                <div>类别</div>
                <div>品牌</div>
                <div>规格</div>
                <div>单位</div>
                <div>数量</div>
              </div>
              <div class="from-content"
                   v-for="(items,index) in temp.list"
                   :key="index">
                <div>{{ items.goods_name }}</div>
                <div>{{ items.goods_code }}</div>
                <div>{{ items.category_name }}</div>
                <div>{{ items.brand_name }}</div>
                <div>{{ items.attribute }}</div>
                <div>{{ items.units_name }}</div>
                <div>{{ items.number }}</div>
              </div>
              <div class="from-footer">
                <div class="remark">备注信息: <span class="remark-content">{{ temp.remark }}</span></div>
                <div class="total">

                </div>
              </div>
            </div>
          </div>
          <div class="headerless-form">
            <div class="from-title">备货说明</div>
            <div class="from-item">
              <el-input v-model="temp.stock_up_explain"
                        type="textarea"></el-input>
            </div>
          </div>
        </div>
        <div class="footer-banner">
        </div>
        <div slot="footer"
             class="dialog-footer">
          <div>
          </div>
          <div>
            <el-button @click="dialogChartFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button type="primary"
                       @click="dialogChartFormVisible = false">{{ $t("table.confirm") }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    const validateName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 20) {
          callback(new Error("名称长度不能大于20个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)[\u4e00-\u9fff\w]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error("名称只能包含汉字、英文、“_”和数字且不为纯数字或纯符号")
            );
          }
        }
      } else {
        callback(new Error("请填写名称"));
      }
    };
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      selectRow: [],
      requisitionList: [],
      statusOptions: [{
        value: 1,
        label: '关机'
      }, {
        value: 2,
        label: '正常'
      }, {
        value: 3,
        label: '故障'
      }],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        attribute: "",
        category_name: "",
        brand_name: "",
        supplier_name: "",
        code: "",
        merchant_name: "",
        itoc_name: "",
        merchant_circle_name: "",
        linkman: "",
        linkman_mobile: "",
        region_name: "",
        status: ""
      },
      temp: {
        id: undefined,
        code: "",
        name: "",
        attribute: "",
        category_id: undefined,
        category_name: "",
        merchant_id: undefined,
        merchant_name: "",
        itoc_id: undefined,
        itoc_name: "",
        merchant_circle_id: undefined,
        merchant_circle_name: "",
        ip: "",
        linkman: "",
        linkman_mobile: "",
        region_id: undefined,
        region_name: "",
        address: "",
        request_time: undefined,
        install_time: undefined,
        status: undefined,
        sales: undefined,
        sum_money: undefined,
        versions: "",
        pathway_number: undefined,
        longitude: "",
        latitude: "",
        details: "",
        create_time: undefined,
        update_time: undefined
      },
      dialogFormVisible: false,
      dialogChartFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, trigger: "blur", validator: validateName }]
      },
      createDisabled: true,
      updateDisabled: true,
      brandOptions: [],
      brandCount: undefined,
      circleOptions: undefined,
      circleCount: undefined,
      sortOptions: [],
      sortCount: undefined,
      pageSize: 20,
      optionProps: {
        value: 'id',
        label: 'name'
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        name: "",
        attribute: "",
        category_name: "",
        brand_name: "",
        supplier_name: "",
        code: "",
        merchant_name: "",
        itoc_name: "",
        merchant_circle_name: "",
        linkman: "",
        linkman_mobile: "",
        region_name: "",
        status: ""
      };
      this.getList();
    },
    searchItem() {
      if (this.showSearchItem === true) {
        this.showSearchItem = false;
      } else {
        this.showSearchItem = true;
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        name: this.listQuery.name ? this.listQuery.name : ""
      };
      const path = {
        // 获取库存报表
        app: "depot",
        api: "api_depot_stock_getList",
        version: "1.0",
        data: data
      }
      console.log('JSON.stringify(path)', JSON.stringify(path))
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleCreate() {
      if (this.selectRow.length > 0) {
        this.$router.push({
          path: '/purchase-data/purchase-requisition',
          query: {
            ids: this.selectRow.join(',')
          }
        })
        // const path = {
        //   app: "goods",
        //   api: "api_goods_index_createPurchaseRequest",
        //   version: "1.0",
        //   data: {
        //     ids: this.selectRow.join(',')
        //   }
        // };
        // console.log('JSON.stringify(path)', JSON.stringify(path))
        // this.socketApi.sendSock(JSON.stringify(path), res => {
        //   if (res) {
        //     this.socketData(res);
        //   }
        // });
      } else {
        return false
      }
      // this.resetTemp();
      // this.dialogStatus = "create";
      // this.dialogFormVisible = true;
      // this.$nextTick(() => {
      //   this.$refs["dataForm"].clearValidate();
      // });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row);
      const path = {
        app: "depot",
        api: "api_depot_stock_purchaseDetails",
        version: "1.0",
        type: 2,
        data: {
          order_no: row.order_no
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        code: "",
        name: "",
        attribute: "",
        category_id: undefined,
        category_name: "",
        merchant_id: undefined,
        merchant_name: "",
        itoc_id: undefined,
        itoc_name: "",
        merchant_circle_id: undefined,
        merchant_circle_name: "",
        ip: "",
        linkman: "",
        linkman_mobile: "",
        region_id: undefined,
        region_name: "",
        address: "",
        request_time: undefined,
        install_time: undefined,
        status: undefined,
        sales: undefined,
        sum_money: undefined,
        versions: "",
        pathway_number: undefined,
        longitude: "",
        latitude: "",
        details: "",
        create_time: undefined,
        update_time: undefined
      };
    },
    // 更新数据
    upData() {
      const data = {
        id: this.temp.id ? this.temp.id : "",
        merchant_circle_id: this.temp.merchant_circle_id ? this.temp.merchant_circle_id : "",
        merchant_circle_name: this.temp.merchant_circle_name ? this.temp.merchant_circle_name : "",
        address: this.temp.address ? this.temp.address : ""
      };
      return data;
    },
    createData() {
      // 添加终端档案
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.createDisabled) {
            this.createDisabled = false;
            const data = this.upData();
            const path = {
              app: "archives",
              api: "api_archives_equipment_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(path), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.createDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    updateData() {
      // 更新终端档案
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.updateDisabled) {
            this.updateDisabled = false;
            const data = this.upData();
            const path = {
              app: "archives",
              api: "api_equipment_index_edit",
              version: "1.0",
              data: data
            };
            console.log('JSON.stringify(path)', JSON.stringify(path))
            this.socketApi.sendSock(JSON.stringify(path), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    handleModifyStatus(row) {
      this.$confirm("此操作将永久删除该终端信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const path = {
            app: "archives",
            api: "api_archives_equipment_delete",
            version: "1.0",
            data: {
              id: row.id
            }
          };
          this.socketApi.sendSock(JSON.stringify(path), res => {
            if (res) {
              this.socketData(res);
            } else {
              this.$message.error(" 删除失败 ");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSelectionChange(data) {
      const selectRow = [];
      if (data.length > 0) {
        data.forEach(element => {
          selectRow.push(element.id)
        });
      }
      this.selectRow = selectRow
    },
    // 商圈选择
    getCircle(pageNumber, search, name) {
      const path = {
        app: "common",
        api: "api_archives_merchantCircle_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 选择分类
    chooseSort(e) {
      const nodeData = this.$refs['cascaderSort'].getCheckedNodes()[0].data
      this.temp.category_id = nodeData.id;
      this.temp.category_name = nodeData.name;
    },
    // 供货商选择
    getSupplier(pageNumber, search, name) {
      const path = {
        app: "common",
        api: "api_archives_supplier_getList",
        version: "1.0",
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    choose(data, name) {
      if (name === 'circle') {
        this.temp.merchant_circle_id = data.id;
        this.temp.merchant_circle_name = data.name;
      }
    },
    remove(data, name) {
      if (name === 'circle') {
        this.temp.merchant_circle_id = undefined;
        this.temp.merchant_circle_name = "";
      }
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_depot_stock_getList") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
            console.log('this.list', this.list)
          } else if (resj.api === "api_archives_equipment_add") {
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
            this.dialogFormVisible = false;
            this.getList();
          } else if (resj.api === "api_equipment_index_edit") {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.dialogFormVisible = false;
            this.getList();
          } else if (resj.api === "api_archives_equipment_delete") {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
            this.dialogFormVisible = false;
            this.getList();
          } else if (resj.api === "api_archives_category_getList") {
            this.sortOptions = resj.data;
          } else if (resj.api === "api_archives_merchantCircle_getList" && resj.type === "getCircle") {
            this.circleOptions = resj.data;
            this.circleCount = resj.count;
            console.log('this.circleOptions', this.circleOptions)
          } else if (resj.api === "api_archives_merchantCircle_getList" && resj.type === "addCircle") {
            this.circleOptions = this.circleOptions.concat(resj.data);
          } else if (resj.api === "api_goods_index_createPurchaseRequest") {
            console.log('resj', resj)
          } else if (resj.api === "api_depot_stock_purchaseDetails") {
            this.temp.list = resj.data;
            this.dialogStatus = "read";
            this.dialogChartFormVisible = true;
            console.log('this.temp', this.temp)
          }
        }
      }
    },
    trackManag(data) {
      this.$router.push({
        path: '/terminal-data/cargo-lane-manag',
        query: {
          code: data.code
        }
      })
    }
  }
};
</script>
